<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- include meta, stylesheets, jquery and title -->
	<ui:include src="/WEB-INF/master/implement.xhtml" />
</h:head>

<h:body>

	<!-- detail information about a product -->

	<ui:include src="/WEB-INF/master/header.xhtml" />

	<div class="container navigation">
		<ui:include src="/WEB-INF/master/navigation.xhtml" />

		<div class="col-md-10">
			<h:form id="add">

				<ui:repeat var="i" value="#{productContainer.productDetail}">

					<h1 style="text-align: center">##{i.id} - #{i.name}</h1>
					<div class="row-fluid">

						<div class="col-sm-12">
							<center>
								<h:graphicImage rendered="#{i.shiny == false}"
									value="resources/img/normal/#{i.id}.png" width="200"
									height="200" />
								<h:graphicImage rendered="#{i.shiny == true}"
									value="resources/img/shiny/#{i.id}.png" width="200"
									height="200" />
							</center>
						</div>

						<div class="col-sm-12">

							<div class="col-sm-4">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="2">Allgemeine Infos</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td>Typ:</td>
											<td>#{i.type1} #{i.type2}</td>
										</tr>
										<tr class="table-bordered">
											<td>Level:</td>
											<td>#{i.level}</td>
										</tr>
										<tr class="table-bordered">
											<td>Wesen:</td>
											<td>#{i.nature}</td>
										</tr>
										<tr class="table-bordered">
											<td>Fähigkeit:</td>
											<td>#{i.ability}</td>
										</tr>
										<tr class="table-bordered">
											<td>Geschlecht:</td>
											<td>#{i.gender}</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-6">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="2">Authentifizierung</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td>Finder:</td>
											<td>#{i.finder}</td>
										</tr>
										<tr class="table-bordered">
											<td>Fanglevel:</td>
											<td>#{i.catchLevel}</td>
										</tr>
										<tr class="table-bordered">
											<td>Fangort:</td>
											<td>#{i.catchPlace}</td>
										</tr>
										<tr class="table-bordered">
											<td>Fangdatum:</td>
											<td>#{i.catchDate}</td>
										</tr>
										<tr class="table-bordered">
											<td>DV-Spruch:</td>
											<td>#{i.sentence}</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-2">
								<h:form>
									<h:selectBooleanCheckbox id="shiny" value="#{i.shiny}"
										disabled="true" />
									<h:outputText for="shiny" value=" Shiny" />
									<br />
									<h:selectBooleanCheckbox id="event" value="#{i.event}"
										disabled="true" />
									<h:outputText for="event" value=" Event" />
									<br />
									<h:selectBooleanCheckbox id="legendary" value="#{i.legendary}"
										disabled="true" />
									<h:outputText for="legendary" value=" Legend&auml;r" />

									<br /><br /><br /><br /><br /><br /><br />

									<b><span style="font-size: medium;"> 
										<h:form rendered="#{i.specialPrice != 0}">
											Preis: <s>
											<h:outputText value="#{i.normalPrice}">
												<f:convertNumber pattern="#0.00" />
											</h:outputText>€ </s>
											<h:outputText value="#{i.specialPrice}">
												<f:convertNumber pattern="#0.00" />
											</h:outputText>€
										</h:form> 
										<h:form rendered="#{i.specialPrice == 0}">
											Preis: 
											<h:outputText value="#{i.normalPrice}">
												<f:convertNumber pattern="#0.00" />
											</h:outputText>€
										</h:form>
									</span></b>
									<br />
								</h:form>
							</div>

						</div>

						<div class="col-sm-12">

							<div class="col-sm-4">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="2">Attacken</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td>#{i.attack1}</td>
											<td>#{i.attack2}</td>
										</tr>
										<tr class="table-bordered">
											<td>#{i.attack3}</td>
											<td>#{i.attack4}</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-6">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="4">EV-Werte</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td>KP</td>
											<td>#{i.evHp}</td>
											<td>Sp.-Ang.</td>
											<td>#{i.evSpatk}</td>
										</tr>
										<tr class="table-bordered">
											<td>Angriff</td>
											<td>#{i.evAtk}</td>
											<td>Sp.-Ver.</td>
											<td>#{i.evSpdef}</td>
										</tr>
										<tr class="table-bordered">
											<td>Vert.</td>
											<td>#{i.evDef}</td>
											<td>Init.</td>
											<td>#{i.evInit}</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-2">
								<p:commandButton value="In den Warenkorb" styleClass="btn btn-default" rendered="#{i.inBasket == false}" update=":add" oncomplete="$('#addProduct').modal('show'); return false;" action="#{orderController.addProductToOrder(i)}"/>
								<h:panelGrid rendered="#{i.inBasket == true}">
									Artikel bereits im Warenkorb
								</h:panelGrid>
							</div>

						</div>

					</div>

				</ui:repeat>

			</h:form>
		</div>
	</div>

	<!-- modal message after adding a product to the basket -->
	<div class="modal fade" id="addProduct" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<form class="form-horizontal">
					<div class="modal-body">
						<h4>Artikel erfolgreich dem Warenkorb hinzugefügt</h4>
					</div>
				</form>
			</div>
		</div>
	</div>

</h:body>
</html>
